@extends('admin.base')
<!--商家列表-->
@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form">
                <form action="" id="searchForm" lay-filter="searchForm" class="layui-form">
                    <div class="layui-input-inline">
                        <input type="text" name="title" id="title" placeholder="商家名" class="layui-input" value="{{ $_GET['title'] ?? '' }}">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="mobile" id="mobile" placeholder="联系人电话" class="layui-input" value="{{ $_GET['mobile'] ?? '' }}">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="start_time" id="start_time" placeholder="创建开始时间" value="{{ $_GET['start_time'] ?? '' }}">
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" name="end_time" id="end_time" placeholder="创建截止时间" value="{{ $_GET['end_time'] ?? '' }}">
                    </div>
                    <div class="layui-input-inline">
                        <select name="status" id="status">
                            <option value="">全部状态</option>
{{--                            <option value="1" @if(isset($_GET['status']) && $_GET['status'] == 1) selected @endif>待审核</option>--}}
                            <option value="2" @if(isset($_GET['status']) && $_GET['status'] == 2) selected @endif>已开启</option>
                            <option value="3" @if(isset($_GET['status']) && $_GET['status'] == 3) selected @endif>已关闭</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="province" id="province" lay-search lay-filter="province">
                            <option value="">全国</option>
                            @foreach($provinces as $province)
                                <option value="{{ $province }}" @if(isset($_GET['province']) && $_GET['province'] == $province) selected @endif>{{ $province }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="city" id="city" lay-search>
                            <option value="">全部城市</option>
                        </select>
                    </div>
                    <button type="button" class="layui-btn" id="searchBtn">搜 索</button>
                    @can('store.create')
                        <a href="/store/create" class="layui-btn">添加</a>
                    @endcan
                </form>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    {{--@can('store.approve')
                        @{{# if(d.status == '1') { }}
                        <a class="layui-btn" lay-event="approve">通过审核</a>
                        @{{# } }}
                    @endcan--}}
                    @can('store.close')
                        @{{# if(d.status == '2') { }}
                        <a class="layui-btn layui-btn-danger" lay-event="close">关闭商家</a>
                        @{{# } }}
                    @endcan
                    @can('store.open')
                        @{{# if(d.status == '3') { }}
                        <a class="layui-btn layui-btn-warm" lay-event="open">开启商家</a>
                        @{{# } }}
                    @endcan
                </div>
                @can('store.edit')
                <a class="layui-btn" lay-event="edit">编 辑</a>
                @endcan
            </script>
        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.use(['layer', 'table', 'form','laydate'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var laydate = layui.laydate;
            laydate.render({elem:'#start_time',type:'datetime'});
            laydate.render({elem:'#end_time',type:'datetime'});

            //商家表格初始化
            var dataTable = table.render({
                elem: '#dataTable'
                , autoSort: false
                , height: 'auto'
                , url: "{{ route('store.data') }}"
                , where: {
                    title: $("#title").val(),
                    mobile: $("#mobile").val(),
                    status: $("#status").val(),
                    start_time: $("#start_time").val(),
                    end_time: $("#end_time").val(),
                    province: $("#province").val(),
                    city: $("#city").val()
                }
                , page: true //开启分页
                ,limit: 30
                , cols: [[ //表头
                    {field: 'title', title: '商家',width: 200}
                    ,{field:'sold_num', title: "销量",width:80}
                    /*,{title: '营业时间',templet:function (d) {
                            return d.open_start.substr(0,5) + ' - ' + d.open_end.substr(0,5);
                        },width:120}*/
                    ,{title: '联系人',templet: function (d) {
                            return d.admin.nickname ? d.admin.nickname : '';
                        },width:80}
                    , {title: '联系人电话',templet: function (d) {
                            return d.admin.phone ? d.admin.phone : '';
                        }}
                    ,{field:'service_mobile',title:"客服电话"}
                    ,{field: 'status', title: '状态',templet:function (d) {
                            switch (d.status) {
                                case "1":
                                    return "待审核";
                                    break;
                                case "2":
                                    return "正常";
                                    break;
                                case "3":
                                    return "关闭";
                                    break;
                                default:
                                    return "未知";
                                    break;
                            }
                        },width:120}
                    ,{title: '区域',templet:function (d) {
                            return d.province + ' - ' + d.city + ' - ' + d.district + ' - ' + d.detailed_address;
                        },width: 400}
                    , {field: 'created_at', title: '创建时间',templet:function (d) {
                            return d.created_at.substring(0,16);
                        },width:150}
                    // ,{title: '推荐人',width: 150}
                    ,{title: "操作",toolbar: '#options'}
                ]]
            });

            //监听工具条
            table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'edit') {
                    let backUrl = '{{ route("store") }}?';
                    $.each($("#searchForm").serializeArray(),function (index, obj) {
                        backUrl += obj.name + '=' + obj.value + '&';
                    });
                    //加上分页参数
                    backUrl += 'page=' + dataTable.config.page.curr + '&limit=' + dataTable.config.page.limit;
                    backUrl = encodeURIComponent(backUrl);

                    //todo  不能写死
                    location.href = '/store/' + data.id + '/edit?backUrl=' + backUrl;
                }else if(layEvent === 'approve'){//审核通过
                    layer.confirm('确认审核通过 <strong>' + data.title + ' </strong>吗？', function (index) {
                        layer.close(index);
                        var load = layer.load();
                        $.post('{{ route("store.approve") }}',{id: data.id},function (res) {
                            layer.close(load);
                            if(res.code == 0) {
                                layer.msg(res.msg,{icon:1,time:2000},function () {
                                    table.reload('dataTable')
                                })
                            }else {
                                layer.msg('通过失败')
                            }
                        });
                    });
                }else if (layEvent === 'close') {
                    layer.confirm('确认关闭 <strong>' + data.title + ' </strong>吗？', {offset: '100px'},function (index) {
                        layer.close(index);
                        var load = layer.load();
                        $.post('{{ route("store.close") }}',{id: data.id},function (res) {
                            layer.close(load);
                            if(res.code == 0) {
                                layer.msg(res.msg,{icon:1,time:2000},function () {
                                    table.reload('dataTable')
                                })
                            }else {
                                layer.msg('关闭失败')
                            }
                        });
                    });
                }else if (layEvent === 'open') {
                    layer.confirm('确认开启 <strong>' + data.title + ' </strong>吗？', {offset: '100px'},function (index) {
                        layer.close(index);
                        var load = layer.load();
                        $.post('{{ route("store.open") }}',{id: data.id},function (res) {
                            layer.close(load);
                            if(res.code == 0) {
                                layer.msg(res.msg,{icon:1,time:2000},function () {
                                    table.reload('dataTable')
                                })
                            }else {
                                layer.msg('开启失败')
                            }
                        });
                    });
                }
            });

            //行单击事件,当前行添加额外样式
            table.on('row(dataTable)',function (obj) {
                $(".layui-table-body tr ").attr({"style":"background:#FFFFFF"});//其他tr恢复原样
                $(obj.tr.selector).attr({"style":"background:#dbefdb"});//改变当前tr颜色
            })
            //搜索
            $("#searchBtn").on('click',function () {
                var title = $("#title").val();
                var mobile = $("#mobile").val();
                var start_time = $("#start_time").val();
                var end_time = $("#end_time").val();
                var status = $("#status").val();
                var province = $("#province").val();
                var city = $("#city").val();
                dataTable.reload({
                    where: {
                        title: title,
                        mobile: mobile,
                        start_time: start_time,
                        end_time: end_time,
                        status: status,
                        province: province,
                        city: city
                    },
                    page: {curr: 1}
                })
            })

            //选择了省后ajax请求返回该省的市
            form.on('select(province)',function (data) {
                let province = data.value;
                $("#city").html('<option value="">全部城市</option>');
                $.get('/city',{province:province},function (cities) {
                    for(let i=0;i<cities.length;i++) {
                        $("#city").append('<option value="' + cities[i] +'">' + cities[i] + '</option>');
                    }
                    form.render('select');
                });
            })
            {{--如果有省参数就把该省下的市查询出来--}}
            @if(isset($_GET['province']))
                $.get('/city',{province: '{{ $_GET['province'] }}'},function (cities) {
                    for(let i=0;i<cities.length;i++) {
                        $("#city").append('<option value="' + cities[i] +'">' + cities[i] + '</option>');
                    }
                    {{--有城市参数时--}}
                    @if(isset($_GET['city']))
                        $("#city").val("{{ $_GET['city'] }}");
                    @endif
                    form.render('select');
                });
            @endif
        })
    </script>
    <style>
        /*表格内容高度自适应*/
        .layui-table-cell {
            height: auto;
        }
    </style>
@endsection
